<script setup>
import { useLoginStore } from "@/stores/login";
import { ref,onMounted } from "vue";
import { useRouter } from "vue-router";
import { ElMessageBox,ElMessage } from "element-plus";
const user = ref({})
const store= useLoginStore()
const router = useRouter()
onMounted(() => {
  user.value = store.user
  console.log(user.value)
})
const exitLogin= ()=>{
  ElMessageBox.confirm(
    '是否确定退出登录',
    'Warning',
    {
      confirmButtonText: '是',
      cancelButtonText: '否',
      type: 'warning',
    }
  )
  .then(() => {
    store.clearData()
    router.replace('/login')
    ElMessage({
      type: 'success',
      message: '已退出登录',
    })
  })
  
}
</script>
<template>
  <div class="top">
    <div class="top-text"> 深圳技术大学与连平县</div>
    <div class="avatar">
      <img style="width: 4rem;height: 4rem;object-fit: contain;" :src="user.avatar" alt="avatar" />
    </div>
    <div class="top-info">
      <div class="top-name">{{ user.name }}</div>
      <div class="top-unit">{{ user.unit }}</div>
    </div>
    <div class="top-exit" @click="exitLogin">
      <IconBase>
        <ExitIcon />
      </IconBase>
    </div>
  </div>
</template>


<style lang="scss" scoped>
.top{
  background-color: #fff;
  display: flex;
  align-items: center;
  position: fixed;
  height: 8rem;
  top: 0;
  width: 100%;
  // box-shadow: 20rem 0.2rem 0.4rem rgba(0, 0, 0, 0.1);
  z-index: 999;
  &-text{
    font-size: 1.9rem;
    font-style: normal;
    font-weight: 700;
    color: #3d3d3d;
    margin-left: 4rem;
    &::after{
      content: '双百工程专用系统';
      color: #147AD6;
    }
  }
  &-name{
    color: #3D3D3D;
    font-size: 1.8rem;
    font-style: normal;
    font-weight: 700;
  }
  &-unit{
    color: #5F727F;
    font-size: 1.2rem;
    font-style: normal;
    font-weight: 400;
  }
  &-exit{
    font-size: 2.5rem;
    margin: 0 4rem 0 5rem;
    cursor: pointer;
  }
}
.avatar{
  margin-left: auto;
  margin-right: 2rem;
  min-width: 3.2rem;
  min-height: 3.2rem;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
}
</style>